<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <title>last.fm Friend Rank</title>
    <link rel="stylesheet" href="/static/style.css" />
    <link rel="icon shortcut" href="http://www.last.fm/favicon.ico" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/script.js"></script>
  </head>
  <body>
    <div id="main">
      <h1>last.fm Friend Rank</h1>
      <form id="the-form">
        <input id="username" type="text" placeholder="last.fm username, e.g. spintriae" />
      </form>
      <progress id="progress"></progress>
      <div id="status-bar">
        <p>For shits and giggles, you can now access this app as a chat bot.</p>
        <p style="text-align: center"><img src="/static/xmpp.png" /></p>
        <p>Instructions...</p>
      </div>
      <ol id="friend-list">
        <li>Add <b>lastfm-friend-rank@appspot.com</b> as a buddy on Google Talk, 
          Jabber, or any other XMPP client you can think of.</li>
        <li>Say <b>/user <i>username</i></b> where <i>username</i> is the name
          of some user on last.fm.</li>
        <li>That's it!</li>
      </ol>
    </div>
  </body>
</html>
